<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待审核申请 - 售后管理系统</title>
    <link rel="stylesheet" href="/after_sale_system/css/common.css">
    <style>
        .filter-bar {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-item label {
            font-weight: 500;
        }

        .filter-item select, .filter-item input {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .btn {
            padding: 6px 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            background-color: #667eea;
            color: white;
        }

        .application-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .application-table th, .application-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .application-table th {
            background-color: #f8f9fa;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-process {
            background-color: #17a2b8;
            color: white;
        }

        .status-pending_audit {
            color: #ffc107;
        }

        .application-row {
            border-bottom: 1px solid #eee;
        }

        .application-actions {
            padding: 10px 15px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>售后管理系统 - 客服端</h1>
    <div class="user-info">
        <span>欢迎，<span id="username">客服</span></span>
        <a href="/after_sale_system/page/login" class="logout-btn">退出登录</a>
    </div>
</div>

<div class="container">
    <div class="content">
        <h2>待审核售后申请</h2>

        <div class="filter-bar">
            <div class="filter-item">
                <label for="typeFilter">申请类型:</label>
                <select id="typeFilter">
                    <option value="">全部类型</option>
                    <option value="REFUND">退款</option>
                    <option value="EXCHANGE">换货</option>
                    <option value="REPAIR">维修</option>
                </select>
            </div>
            <div class="filter-item">
                <label for="searchKeyword">搜索:</label>
                <input type="text" id="searchKeyword" placeholder="订单号/商品名">
            </div>
            <div class="filter-item">
                <button class="btn btn-primary" id="searchBtn">查询</button>
                <button class="btn" id="resetBtn">重置</button>
            </div>
        </div>

        <div id="applicationsContainer">
            <!-- 申请列表将通过JavaScript动态生成 -->
            <div class="loading">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        </div>

        <div class="pagination" id="pagination">
            <!-- 分页控件将通过JavaScript动态生成 -->
        </div>
    </div>
</div>

<script src="/after_sale_system/js/common.js"></script>
<script>
    // 获取用户信息
    fetch('/after_sale_system/api/user/info')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('username').textContent = data.data;
            }
        })
        .catch(error => {
            console.error('获取用户信息失败:', error);
        });

    let currentPage = 1;
    let totalPages = 1;

    document.addEventListener('DOMContentLoaded', function() {
        loadApplications();

        // 搜索按钮事件
        document.getElementById('searchBtn').addEventListener('click', function() {
            currentPage = 1;
            loadApplications();
        });

        // 重置按钮事件
        document.getElementById('resetBtn').addEventListener('click', function() {
            document.getElementById('typeFilter').value = '';
            document.getElementById('searchKeyword').value = '';
            currentPage = 1;
            loadApplications();
        });
    });

    // 加载申请列表
    function loadApplications() {
        const typeFilter = document.getElementById('typeFilter').value;
        const searchKeyword = document.getElementById('searchKeyword').value;

        const params = new URLSearchParams();
        params.append('status', 'PENDING_AUDIT'); // 只加载待审核状态
        if (typeFilter) params.append('type', typeFilter);
        if (searchKeyword) params.append('keyword', searchKeyword);
        params.append('page', currentPage);

        fetch(`/after_sale_system/api/afterSale/?${params.toString()}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayApplications(data.data);
                    totalPages = data.totalPages || 1;
                    updatePagination();
                } else {
                    showError('获取申请列表失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('获取申请列表失败:', error);
                showError('获取申请列表失败，请稍后重试');
            });
    }

    // 显示申请列表
    function displayApplications(applications) {
        const container = document.getElementById('applicationsContainer');

        if (!applications || applications.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <h3>暂无待审核申请</h3>
                    <p>当前没有需要审核的售后申请</p>
                </div>
            `;
            return;
        }

        container.innerHTML = applications.map(app => `
            <div class="application-item">
                <table class="application-table">
                    <thead>
                    <tr class="application-row">
                        <th>申请ID</th>
                        <th>用户ID</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>申请类型</th>
                        <th>申请时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="application-row">
                        <td>${app.id}</td>
                        <td>${app.userId}</td>
                        <td>${app.orderId}</td>
                        <td>${app.productName}</td>
                        <td>${formatAfterSaleType(app.afterSaleType)}</td>
                        <td>${formatDateTime(app.applyTime)}</td>
                    </tr>
                    </tbody>
                </table>
                <div class="application-actions">
                    <a href="/after_sale_system/page/customerService/applicationDetail?id=${app.id}" class="btn">查看详情</a>
                    <a href="/after_sale_system/page/customerService/processApplication?id=${app.id}" class="btn btn-process">处理申请</a>
                </div>
            </div>
        `).join('');
    }

    // 格式化售后类型
    function formatAfterSaleType(type) {
        const typeMap = {
            'REFUND': '退款',
            'EXCHANGE': '换货',
            'REPAIR': '维修'
        };
        return typeMap[type] || type;
    }

    // 格式化日期时间
    function formatDateTime(dateString) {
        if (!dateString) return 'N/A';
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN');
    }

    // 更新分页
    function updatePagination() {
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = '';

        // 上一页
        if (currentPage > 1) {
            pagination.innerHTML += `<button class="btn" onclick="changePage(${currentPage - 1})">上一页</button>`;
        }

        // 页码
        for (let i = 1; i <= totalPages; i++) {
            if (i === currentPage) {
                pagination.innerHTML += `<button class="btn btn-primary">${i}</button>`;
            } else {
                pagination.innerHTML += `<button class="btn" onclick="changePage(${i})">${i}</button>`;
            }
        }

        // 下一页
        if (currentPage < totalPages) {
            pagination.innerHTML += `<button class="btn" onclick="changePage(${currentPage + 1})">下一页</button>`;
        }
    }

    // 切换页面
    function changePage(page) {
        currentPage = page;
        loadApplications();
    }

    function showError(message) {
        alert(message);
    }
</script>
</body>
</html>